<template>
	<view class="personage">
		<view class="certification-title">
			证件上传
		</view>
		<view class="identity">
			<view class="identity-item">
				<view class="upload" @click="choosePhoto('1')">
					<image class="idcode-bg" src="@/static/certification/idcode_bg1.png" mode=""></image>
					<image v-if="!form.front" class="photo-icon" src="@/static/certification/photo_icon.png" mode="">
					</image>
					<image v-if="form.front" class="idcode-img" :src="form.front" mode=""></image>
				</view>
				<text>请上传身份证<text>人像面</text></text>
			</view>
			<view class="identity-item">
				<view class="upload" @click="choosePhoto('2')">
					<image class="idcode-bg" src="@/static/certification/idcode_bg2.png" mode=""></image>
					<image v-if="!form.back" class="photo-icon" src="@/static/certification/photo_icon.png" mode="">
					</image>
					<image v-if="form.back" class="idcode-img" :src="form.back" mode=""></image>
				</view>
				<text>请上传身份证<text>国徽面</text></text>
			</view>
		</view>
		<view class="identity-tips">
			*请确保证件边框完整、字迹清晰、亮度均衡
			<image v-if="info.is_status == 0 && disabled" src="@/static/certification/audit_icon1.png" mode=""></image>
			<image v-if="info.is_status == 1 && disabled" src="@/static/certification/audit_icon3.png" mode=""></image>
			<image v-if="info.is_status == 2 && disabled" src="@/static/certification/audit_icon2.png" mode=""></image>
		</view>
		<view class="certification-title">
			基础信息
		</view>
		<view class="form">
			<u--form labelPosition="left" :model="form" ref="uForm1" labelWidth="auto">
				<u-form-item label="真实姓名" prop="name" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" v-model="form.name" :readonly="disabled" border="none" placeholder="请输入真实姓名"></u--input>
				</u-form-item>
				<u-form-item label="联系人电话" prop="phone" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" type="number" v-model="form.phone" :readonly="disabled" maxlength="11" border="none" placeholder="请输入联系人电话"></u--input>
				</u-form-item>
				<u-form-item label="证件类型" prop="certificate_type" borderBottom>
					<text class="must">*</text>
					<dwu-picker :disabled="disabled" placeholder="请选择证件类型" :defaultVal="form.certificate_type" :columns="idcodeTypeList"
						@onconfirm="confirmIdcodeType"></dwu-picker>
				</u-form-item>
				<u-form-item label="证件号码" prop="cart" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" v-model="form.cart" :readonly="disabled" border="none" placeholder="请输入证件号码"></u--input>
				</u-form-item>
				<u-form-item label="地址" prop="address" borderBottom>
					<dwu-chooseLocation :disabled="disabled" :defaultVal="form.address" placeholder="请选择地址" @onconfirm="confirmAddress"></dwu-chooseLocation>
				</u-form-item>
				<u-form-item label="电子邮箱" prop="email" borderBottom>
					<u--input inputAlign="right" v-model="form.email" :readonly="disabled" border="none" placeholder="请输入电子邮箱"></u--input>
				</u-form-item>
				<u-form-item label="申请备注" prop="remark_message">
					<u--input inputAlign="right" v-model="form.remark_message" :readonly="disabled" border="none"
						placeholder="请输入申请备注"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="certification-title">
			角色资料
		</view>
		<view class="form">
			<u--form labelPosition="left" :model="form"  ref="uForm" labelWidth="auto">
				<u-form-item label="服务区域" prop="area_id" borderBottom>
					<text class="must">*</text>
					<dwu-picker :disabled="disabled" placeholder="请选择服务区域" keyName="city" keyVal="id" :defaultVal="form.area_id" :columns="areaList"
						@onconfirm="confirmArea"></dwu-picker>
				</u-form-item>
				<u-form-item label="工作年限" prop="workyear">
					<text class="must">*</text>
					<dwu-picker :disabled="disabled" placeholder="请选择工作年限" keyVal="id" :defaultVal="form.workyear" keyName="title" :columns="yearTypeList"
						@onconfirm="confirmYearType"></dwu-picker>
				</u-form-item>
			</u--form>
		</view>
		<view class="certificate">
			<view class="certificate-title">
				<view class="left">资质证书</view>
				<view class="right" v-if="!disabled" @click="onJump('/subpackage/certification/certificate')">
					<image src="@/static/certification/add_icon.png" mode=""></image>
					<text>添加证书</text>
				</view>
			</view>
			<view class="certificate-list" v-if="certificateList.length > 0">
				<view class="certificate-item" v-for="(item,index) in certificateList" :key="index" @click="zsxqydetail(item.id)">
					<text>{{item.label}}</text>
					<image v-if="!disabled" @click="delCertificate(item.id,index)" src="@/static/certification/sub_icon.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="certificate">
			<view class="certificate-title">
				<view class="left">工作简介</view>
				<view class="right"></view>
			</view>
			<u--input v-model="form.workintro" :readonly="disabled" border="none" placeholder="请输入工作简介"></u--input>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				// info: {},
				form: {
					front: '',
					back: ''
				},
				idcodeTypeList: [
					[{
							label: '身份证',
							type: 1
						},
						{
							label: '护照',
							type: 2
						}
					]
				],
				yearTypeList: [],
				areaList: [],
				certificateList: [],
				disabled: false
			};
		},
		watch: {
			info(val) {
				console.log(val,'personage');
				this.form.front = val.cartis_img
				this.form.back = val.cartthe_img
				this.form.name = val.name
				this.form.certificate_type = val.certificate_type
				this.form.cart = val.cart
				this.form.email = val.email
				this.form.address = val.address
				this.form.remark_message = val.remark_message
				this.form.area_id = val.area_id
				this.form.workyear = val.workyear
				this.form.workintro = val.workintro
				this.form.id = val.id
				this.form.phone = val.phone
				this.certificateList = []
				if (val.certificate_id) {
					for (let key in val.certificate_text) {
						this.certificateList.push({
							id: key,
							label: val.certificate_text[key]
						})
					}
				}
				if (val.is_status == 0 || val.is_status == 1 || val.is_status == 2) {
					this.disabled = true
				}
			}
		},
		created() {
			this.cityList()
			this.getYearType()
		},
		methods: {
			zsxqydetail(zsid){
				uni.navigateTo({
					url:'/subpackage/certification/certificate?zsid='+zsid
				})
			},
			choosePhoto(type) {
				if (this.disabled) return
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.upload.file('/Common/upload', res.tempFilePaths[0], 'file')
							.then(file => {
								uni.hideLoading()
								file = JSON.parse(file)
								if (file.code == 1) {
									if (type == 1) {
										this.form.front = file.data.fullurl
									}
									if (type == 2) {
										this.form.back = file.data.fullurl
									}
									uni.showToast({
										title: '上传成功'
									})
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									})
								}
							})
					}
				})
			},
			cityList() {
				this.request.http('/index/cityList', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						this.areaList = [data.data]
					}
				})
			},
			getYearType() {
				this.request.http('/index/getYearType', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						this.yearTypeList = [data.data]
					}
				})
			},
			confirmIdcodeType(e) {
				this.form.certificate_type = e.value[0].type
			},
			confirmAddress(e) {
				this.form.address = e.address
			},
			confirmArea(e) {
				this.form.area_id = e.value[0].id
			},
			confirmYearType(e) {
				this.form.workyear = e.value[0].id
			},
			delCertificate(id,index) {
				uni.showModal({
					title: '提示',
					content: '是否删除当前证书？',
					success: (res) => {
						if (res.confirm) {
							this.request.http('/user/certificatedel', 'post', {
								id
							}).then(res => {
								let data = res.data
								if (data.code == 1) {
									this.certificateList.splice(index,1)
								}
							})
						}
					}
				})
			},
			onJump(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="less">
	.personage {
		.certification-title {
			padding-left: 26rpx;
			margin-top: 34rpx;
			margin-bottom: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #474747;
			line-height: 42rpx;
		}

		.identity {
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.identity-item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.upload {
					position: relative;
					width: 284rpx;
					height: 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 8rpx;

					.idcode-bg {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						width: 100%;
						height: 100%;
					}

					.photo-icon {
						position: relative;
						z-index: 10;
						width: 46rpx;
						height: 44rpx;
					}

					.idcode-img {
						position: relative;
						z-index: 10;
						width: 100%;
						height: 100%;
					}
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #999999;
					line-height: 33rpx;

					text {
						color: #9CC963;
					}
				}
			}
		}

		.identity-tips {
			position: relative;
			padding-left: 32rpx;
			margin-top: 16rpx;
			margin-bottom: 10rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 21rpx;
			color: #999999;
			line-height: 56rpx;

			image {
				position: absolute;
				top: 0;
				right: 52rpx;
				z-index: 10;
				width: 136rpx;
				height: 114rpx;
			}
		}

		.form {
			padding: 16rpx 25rpx;
			background-color: #fff;
			border-radius: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 27rpx;
			color: #313131;

			/deep/.u-form-item__body__left__content__label {
				font-size: 27rpx;
				color: #313131;
			}

			input {
				padding-right: 30rpx;
				font-weight: 400;
				font-size: 27rpx !important;
			}

			/deep/.u-form-item {
				position: relative;
			}

			.must {
				position: absolute;
				top: 28rpx;
				margin-left: -6rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 23rpx;
				color: #D55252;
			}
		}

		.certificate {
			margin: 18rpx 0;
			padding: 34rpx 25rpx;
			background-color: #fff;

			.certificate-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 27rpx;
					color: #313131;
				}

				.right {
					display: flex;
					align-items: center;

					image {
						margin-right: 10rpx;
						width: 26rpx;
						height: 26rpx;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 27rpx;
						color: #B0DD67;
					}
				}
			}

			.certificate-list {
				margin-top: 34rpx;

				.certificate-item {
					margin-top: 14rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						display: block;
						width: 587rpx;
						height: 88rpx;
						background: #F6F7FB;
						border-radius: 19rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 27rpx;
						color: #333333;
						line-height: 88rpx;
						text-align: center;
					}

					image {
						margin-left: 26rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}


			input {
				margin-top: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx !important;
			}
		}



	}
</style>